<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-button type="primary" @click="add">添加</el-button>
      <el-table :data="tableData" border style="margin-top: 30px">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              class="rights"
              v-for="item1 in scope.row.children"
              :key="item1.id"
            >
              <el-col :span="6">
                <el-tag
                  @close="delrights(scope.row, scope.row.id, item1.id)"
                  closable
                  type="success"
                  >{{ item1.authName }}</el-tag
                >
              </el-col>
              <el-col :span="18">
                <el-row v-for="item2 in item1.children" :key="item2.id">
                  <el-col :span="6">
                    <el-tag
                      type="info"
                      @close="delrights(scope.row, scope.row.id, item2.id)"
                      closable
                      >{{ item2.authName }}</el-tag
                    >
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      @close="delrights(scope.row, scope.row.id, item3.id)"
                      closable
                      v-for="item3 in item2.children"
                      :key="item3.id"
                      >{{ item3.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <!-- <el-table-column label="#" > </el-table-column> -->
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="rolebj(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row)"
              >删除</el-button
            >
            <el-button
              @click="fenpeilog(scope.row)"
              type="warning"
              size="mini"
              icon="el-icon-setting"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹出框 -->
      <el-dialog title="添加" :visible.sync="rolelogadd">
        <el-form :model="form">
          <el-form-item
            label="角色名称"
            prop="roleName"
            :label-width="namewidth"
          >
            <el-input v-model="form.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="角色描述"
            prop="roleDesc"
            :label-width="namewidth"
          >
            <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rolelogadd = false">取 消</el-button>
          <el-button type="primary" @click="addlist">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑弹出框 -->
      <el-dialog title="修改" :visible.sync="rolelogbj">
        <el-form :model="formbj" ref="addref">
          <el-form-item
            label="角色名称"
            prop="roleName"
            :label-width="namewidth"
          >
            <el-input v-model="formbj.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="角色描述"
            prop="roleDesc"
            :label-width="namewidth"
          >
            <el-input v-model="formbj.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rolelogbj = false">取 消</el-button>
          <el-button type="primary" @click="bjlist">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分配权限 -->
      <el-dialog
        title="分配权限"
        :visible.sync="fenpei"
        width="30%"
        :before-close="handleClose"
        
      >
        <span>
          <el-tree
            :data="fenpeilist"
            show-checkbox
            node-key="id"
            default-expand-all
            :default-checked-keys="checkarr"
            :props="defaultProps"
            ref="treeref"
          >
          </el-tree>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="fenpei = false">取 消</el-button>
          <el-button type="primary" @click="fentree">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>


<script>
import {
  rolelist,
  rolebian,
  addrolelist,
  delrole,
  delrightapi,
  treelist,
  getCheckedApi
} from "@/http/api";
export default {
  data() {
    return {
      id:0,
      defaultProps: {
        children: "children",
        label: "authName",
      },
      // 分配权限弹框里面的数据
      fenpeilist: [],
      tableData: [],
      //存放已选中id的数组
      checkarr: [],
      form: {
        roleName: "",
        roleDesc: "",
      },
      formbj: {
        roleName: "",
        roleDesc: "",
        id: 0,
      },
      namewidth: "80px",
      rolelogbj: false,
      rolelogadd: false,
      fenpei: false,
    };
  },
  created() {
    this.getroles();
  },
  methods: {

    //add添加权限
     async fentree(){
       console.log(1111111111111)

      const allchecked=this.$refs.treeref.getCheckedKeys();
      const halfchecked=this.$refs.treeref.getHalfCheckedKeys()
      const mergechecked=[...allchecked,...halfchecked]
      const AllcheckedIdsStr=mergechecked.join(',')
      const res=await getCheckedApi(this.id,AllcheckedIdsStr)
      this.getroles();
      this.fenpei = false;
    },
    // 分配权限
    // fenpei是对话框 fenpeilog 是点击分配权限的事件
    // fenpeilist 是渲染到分配权限的数据
    // checkall 是已选中的权限id 组成的数组
    //打开模态框
    async fenpeilog(row) {
      this.fenpei = true;
      this.checkarr = [];
      const res = await treelist("tree");
      this.fenpeilist = res;
      this.id=row.id
      this.yyy(row,this.checkarr)
      // console.log("id:", this.checkarr);
    },
    //  递归
    yyy(row,checkarr){
      console.log("11111",row);
      console.log("22222",checkarr);
      if(!row.children){
        return checkarr.push(row.id)
      }
      row.children.forEach(item=>{
        this.yyy(item,checkarr)
      })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async delrights(row, roleId, rightId) {
      const res = await delrightapi(roleId, rightId);
      row.children = res;
      console.log(res);
    },
    async del(row) {
      console.log(row);
      const res = await delrole(row.id);
      this.getroles();
      console.log(res);
    },
    add() {
      this.rolelogadd = true;
    },
    async addlist() {
      const res = await addrolelist(this.form);
      console.log(res);
      this.getroles();
      this.rolelogadd = false;
      this.form.roleName = "";
      this.form.roleDesc = "";
    },
    rolebj(row) {
      this.rolelogbj = true;
      console.log(row);
      this.formbj.roleName = row.roleName;
      this.formbj.roleDesc = row.roleDesc;
      this.formbj.id = row.id;
    },
    async bjlist() {
      const res = await rolebian(this.formbj);
      console.log(res);
      this.getroles();
      this.rolelogbj = false;
    },
    async getroles() {
      const res = await rolelist();
      console.log("角色", res);
      this.tableData = res;
    },
    // 角色授权
    
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin-top: 20px;
}
.el-card {
  margin-top: 20px;
}
.el-tag {
  margin: 10px 10px;
}
</style>